<template>
  <q-page padding>
    <div class="items-center row q-gutter-md" style="margin-bottom: 10px">
      <q-input
        outlined
        dense
        style="width: 15%"
        v-model="queryParams.menu_code"
        :label="$t('Menu') + $t('Code')"
      />
      <q-input
        outlined
        dense
        style="width: 15%"
        v-model="queryParams.title"
        label="菜单名称"
      />
      <q-select
        outlined
        dense
        emit-value
        clearable
        map-options
        style="width: 15%"
        v-model="queryParams.page_type"
        label="页面类型"
        :options="dictOptions.pageType"
      />
      <q-btn color="primary" @click="handleSearch" :label="$t('Search')" />
      <q-btn color="primary" @click="resetSearch" :label="$t('Reset')" />
    </div>
    <q-space />
    <q-btn
      color="primary"
      @click="showAddParentForm()"
      :label="$t('Add') + $t('Parent') + $t('Menu')"
    />
    <q-space />
    <dc-hierarchy
      separator="cell"
      dense
      :columns="columns"
      :data="menuTree"
      :loading="loading"
    >
      <template v-slot:body="props">
        <dc-tree-td :treeTd="props" firstTd="sort"></dc-tree-td>
        <td class="text-center">
          <q-icon size="md" :name="props.item.icon" />
        </td>
        <td class="text-center">
          {{ props.item.menu_code }}
        </td>
        <td class="text-center">
          {{ props.item.title }}
        </td>
        <td class="text-center">
          {{ props.item.path }}
        </td>
        <td class="text-center">
          <DcDictCell dictName="pageType" :dictCode="props.item.page_type" />
        </td>
        <td class="text-center">
          {{ getPageContent(props.item) }}
        </td>

        <td class="text-center">
          <DcDictCell dictName="statusYesNo" :dictCode="props.item.hidden" />
        </td>
        <td class="text-center">
          <DcDictCell dictName="source" :dictCode="props.item.source" />
        </td>
        <td class="text-center">
          <div class="q-gutter-xs">
            <q-btn
              dense
              color="primary"
              @click="showEditForm(props.item)"
              :label="$t('Edit')"
            />
            <q-btn
              dense
              color="warning"
              @click="showAddChildrenForm(props.item.menu_code)"
              :label="$t('Add') + $t('Children') + $t('Menu')"
            />
            <q-btn
              dense
              color="negative"
              @click="
                handleDelete(
                  props.item,
                  '如果该菜单下有子菜单，将一并删除，是否确认删除？'
                )
              "
              :label="$t('Delete')"
            />
          </div>
        </td>
      </template>
    </dc-hierarchy>
    <MenuRecordDetail ref="recordDetailDialog" @handleFinish="handleFinish" />
  </q-page>
</template>

<script setup>
import useTableData from "src/composables/useTableData";
import { computed, unref, onMounted, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import MenuRecordDetail from "./MenuRecordDetail.vue";
import { FormatDateTime } from "src/utils/date";
import { ArrayToTree } from "src/utils/arrayAndTree";
import DcHierarchy from "src/components/DcHierarchy/DcHierarchy.vue";

const { t } = useI18n();
const url = {
  list: "menu/get-menu-list",
  delete: "menu/delete-menu-by-id",
};

const columns = computed(() => {
  return [
    { name: "sort", align: "center", label: t("Sort"), field: "sort" },
    { name: "icon", align: "center", label: t("Icon"), field: "icon" },
    {
      name: "menu_code",
      align: "center",
      label: t("Menu") + t("Code"),
      field: "menu_code",
    },
    { name: "title", align: "center", label: t("Name"), field: "title" },
    { name: "path", align: "center", label: t("Path"), field: "path" },
    {
      name: "page_type",
      align: "center",
      label: t("Page") + t("Type"),
      field: "page_type",
    },

    {
      name: "content",
      align: "center",
      label: t("Page") + t("Content"),
      field: "component",
    },
    { name: "hidden", align: "center", label: t("Hidden"), field: "hidden" },
    { name: "source", align: "center", label: t("Source"), field: "source" },
    { name: "actions", align: "center", label: t("Actions"), field: "actions" },
  ];
});
const {
  pagination,
  DcDictCell,
  queryParams,
  dictOptions,
  tableData,
  loading,
  recordDetailDialog,
  showAddForm,
  showEditForm,
  getTableData,
  handleFinish,
  handleSearch,
  resetSearch,
  handleDelete,
} = useTableData(url);

onMounted(() => {
  pagination.value.rowsPerPage = 99999;
  getTableData();
});

const getPageContent = (item) => {
  if (item.page_type === "component") {
    return item.component;
  } else if (item.page_type === "redirect") {
    return item.redirect.length > 50
      ? item.redirect.substring(0, 50) + "..."
      : item.redirect;
  } else if (item.page_type === "sql") {
    if (item.sql) {
      return item.sql.sql_code;
    } else {
      return "请配置展示的Sql页面";
    }
  } else if (item.page_type === "directory") {
    return null;
  } else if (item.page_type === "document" && item.document) {
    return item.document.substring(0, 5);
  }
};

const menuTree = computed(() => {
  if (tableData.value.length !== 0) {
    const mt = ArrayToTree(tableData.value, "menu_code", "parent_code");
    return mt;
  }
  return [];
});

const showAddParentForm = () => {
  showAddForm();
};
const showAddChildrenForm = (menu_code) => {
  recordDetailDialog.value.formType = "add";
  recordDetailDialog.value.show();
  recordDetailDialog.value.recordDetail.value.parent_code = menu_code;
};
</script>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "MenuComp",
});
</script>
